<template>
    <div class="defaultForm">
        <el-descriptions class="margin-top" title="项目信息" :column="1" >
          <el-descriptions-item label="项目名称">{{dataForm.projectName}}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{dataForm.createDate}}</el-descriptions-item>
        </el-descriptions>

        <!--工具栏-->
        <el-form :inline="true" size="mini" class="toolbar" style="margin-top:20px">
          <el-form-item >
              <el-upload
              name="file"
              action="nothing"
              :http-request="upload"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload" :show-file-list="false">
              <el-button size="mini" type="primary" icon="el-icon-paperclip" plain>上传附件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item >
            <el-button @click="$router.back(-1)">返回</el-button>
          </el-form-item>
        </el-form>

        <!--表格区-->
        <el-table :data="tableData" border stripe style="width: 100%;" size="mini"
            v-loading="loading" 
            element-loading-text="请稍后...">
            <template slot="empty">
                还没有数据呢~ (⊙︿⊙)
            </template>
            <el-table-column type="index" :index="common.getRowIndex" label="#" align="center"></el-table-column>
            <el-table-column prop="fileName" label="附件名称" align="center"></el-table-column>
            <el-table-column prop="fileSize" label="大小" align="center"></el-table-column>
            <el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
            <el-table-column align="center" label="操作" width="200">
                <template >
                    <el-button size="mini" type="primary"  plain 
                    @click="alert('todo')">下载</el-button>

                    <el-button size="mini" type="danger"  plain 
                    @click="alert('todo')">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
    </div>
</template>

<script>
    export default {
      data() {
        return {
          loading: false,
          fileList:[],
          dataForm: {
            id: '',
            projectName: '',
            createDate:'',
          },
          tableData:[]
        };
      },
      created() {
        this.initForm();
      },
      methods: {
        async initForm(){
            await this.getFormData();
            await this.getFileData();
        },
        async getFormData(){
            let id = this.$route.params.id;
            this.getRequest('/project-info/details',{id:id}).then(resp => {
                if (resp && resp.code==0) {
                    this.dataForm = resp.data;
                }
            })
        },
        async getFileData(){
            let id = this.$route.params.id;
            this.getRequest('/project-attachment/list',{projectId:id}).then(resp => {
                if (resp && resp.code==0) {
                    this.tableData = resp.data;
                }
            })
        },
        handleAvatarSuccess(res, file) { 
            this.loading = false
            this.dataForm.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isLt50MB = file.size / 1024 / 100 / 100 < 50;
            if (!isLt50MB) {
                this.$message.error('上传头像图片大小不能超过 50MB!');
            }
            return isLt50MB;
        },
        // 上传图片
        upload(item) { 
            this.loading = true
            let id = this.$route.params.id;
            let formData = new FormData()
            formData.append('file', item.file)
            formData.append('projectId', id)
            this.postRequest('/file/upload', formData).then(resp => {
                this.loading = false
                this.common.showMessage(this, resp)
                if (resp && resp.code==0) {
                    this.getFileData()
                }
            })
        }
      }
    }
</script>

<style scoped>
    .defaultForm {
        margin: 10px 0px 0px 25px;
        width: 80%;
    }
    .el-cascader {
      width: 60%;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 64px;
        height: 64px;
        line-height: 64px;
        text-align: center;
    }
    .avatar {
        width: 64px;
        height: 64px;
        display: block;
    }
</style>